const path = require('path')
const webpack = require('webpack')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') // 压缩图片插件
const packageConfig = require('./package.json')

const ENV_CONFIG = packageConfig.envConfig[process.env.ENV_KEY]

module.exports = {
  // 静态资源访问路径, 默认是 '/'
  publicPath: './',
  // 指定构建后的输出目录，默认是 'dist'
  outputDir: 'dist',
  // 是否每次保存时 lint 代码,可选值 (boolean | 'warning' | 'default' | 'error') 默认 'default'
  lintOnSave: 'default',
  // 配置开发服务器选项
  devServer: {
    // 开发服务器启动时是否自动打开浏览器
    open: false,
    // 端口号
    port: 3000
  },
  // 配置css相关选项
  css: {
    // 开启 source map
    sourceMap: process.env.NODE_ENV == 'development'
  },
  // webpack 的配置对象
  configureWebpack: {
    // 配置需要使用的 webpack 插件
    plugins: [
      // 环境配置全局变量
      new webpack.DefinePlugin({
        'process.env.config': JSON.stringify(ENV_CONFIG)
      }),
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          // 指定了采用哪种图片压缩实现方式
          implementation: ImageMinimizerPlugin.imageminGenerate,
          // 压缩插件选项
          options: {
            plugins: ['pngquant'] // 用于对 PNG 图片进行压缩
          }
        }
      })
    ],
    // 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块
    resolve: {
      // 设置路径别名
      alias: {
        '@': path.resolve('src'),
        '@public': path.resolve('public'),
        '@img': path.resolve('src/assets/images'),
        '@js': path.resolve('src/assets/scripts'),
        '@css': path.resolve('src/assets/styles')
      }
    }
  }
}
